<template>
  <view class="content">
    <view class="headers">
      <view class="first-line">
        <image src="/static/icon_my_person.png"></image>
        <view class=""> {{ user.nickname }} </view>
      </view>
      <view class="second-line">
        <!--image src="/static/icon_my_person.png"></image-->
        <image src="/static/icon_my_phone.png"></image>
      </view>
      <view class="third-line"> 总资产（元） </view>
      <view class="fourth-line"> {{ user.money }} </view>

      <view class="getMoney btn-style"> 提现 </view>
      <view class="sendMoney btn-style"> 充值 </view>
      <!-- <image src="/static/myBGP.png"></image> -->
    </view>

    <view class="choose-options" @click="gotoAccountSafe">
      <view class="">
        <image src="/static/icon_my_account.png" class="leftPicTure"></image>
        账户安全
      </view>
      <image src="/static/icon_my_next.png" class="arrow"></image>
    </view>

    <view class="choose-options" @click="myMethods">
      <view class="">
        <image src="/static/icon_my_plan.png" class="leftPicTure"></image>
        我的方案
      </view>
      <image src="/static/icon_my_next.png" class="arrow"></image>
    </view>

    <view class="choose-options" @click="helpWhite">
      <view class="">
        <image src="/static/icon_my_help.png" class="leftPicTure"></image>
        帮助文档
      </view>
      <image src="/static/icon_my_next.png" class="arrow"></image>
    </view>

    <view class="choose-options">
      <view class="">
        <image src="/static/icon_my_exit.png" class="leftPicTure"></image>
        退出
      </view>
      <image src="/static/icon_my_next.png" class="arrow"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: [],
    };
  },
  onShow() {
    var that = this;
    var value = uni.getStorageSync("poxer_ssid");
    if (value == null || value == "") {
      return uni.navigateTo({
        url: "/pages/login/login",
      });
    }
    /////////////////////////////////////
    var param = { uid: value };
    //////
    that._post("Users/index", param, function (res) {
      if (res.status != "1") {
        return;
      }
      that.user = res.data;
    });
  },
  methods: {
    // 前往账号安全页面
    gotoAccountSafe() {
      uni.navigateTo({
        url: "/pages/accountSafe/accountSafe",
      });
    },
    // 帮助文档
    helpWhite() {
      uni.navigateTo({
        url: "/pages/helpWhite/helpWhite",
      });
    },
    // 我的方案
    myMethods() {
      uni.navigateTo({
        url: "/pages/myIdeaProject/myIdeaProject",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  width: 750rpx;
  background-color: #000000;
  height: 100vh;

  .headers {
    width: 100%;
    height: auto;
    padding: 30rpx 40rpx;
    box-sizing: border-box;
    // border: 1px solid red;
    position: relative;
    background-image: url(../../static/myBGP.png);
    background-size: 100% 100%;

    .first-line {
      display: flex;
      height: 96rpx;
      align-items: center;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;

      image {
        margin-right: 23rpx;
        width: 96rpx;
        height: 96rpx;

        border-radius: 50%;
      }
    }

    .second-line {
      margin-top: 32rpx;
      margin-left: 20rpx;

      image {
        margin-right: 20rpx;
        width: 50rpx;
        height: 50rpx;
        background: #ffffff;
        border-radius: 50%;
      }
    }

    .third-line {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #aaaaaa;
      margin-top: 34rpx;
    }

    .fourth-line {
      margin-top: 34rpx;
      font-size: 42rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #fefefe;
    }

    .btn-style {
      width: 104rpx;
      height: 54rpx;
      border: 2rpx solid #db1414;
      border-radius: 10rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #db1414;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 66rpx;
    }

    .sendMoney {
      right: 67rpx;
    }

    .getMoney {
      right: 200rpx;
    }
  }

  .choose-options {
    box-sizing: border-box;
    padding-left: 24rpx;
    padding-right: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 94rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    border-bottom: 3rpx solid #272727;

    .leftPicTure {
      margin-right: 34rpx;
    }

    image {
      width: 30rpx;
      height: 30rpx;
    }

    .arrow {
      width: 18rpx;
      height: 30rpx;
    }
  }
}
</style>
